<template>
  <view class="container">
    <!-- 列表页 -->
    <view class="card-list">
      <view
        class="card"
        v-for="(item, index) in vehicles"
        :key="index"
        @click="goOperateDetails(item)"
      >
        <view class="list-item">
          <text class="vehicle-number">{{ item.vehicleNo }}</text>
          <text class="color-label">{{ item.plateColor }}</text>
          <view class="status-container">
            <text
              :class="[
                'status-label',
                item.businessState === '营运' ? 'active' : 'inactive',
              ]"
            >
              {{ item.businessState }}
            </text>
            <u-icon
              name="arrow-right"
              size="16"
              color="#C0C0C0"
              class="arrow-icon"
            ></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      vehicleData: {}, // 用于存储传递过来的车辆数据
      vehicles: [], // 初始化为空数组
    };
  },
  onLoad(options) {
    if (options.vehicleData) {
      this.vehicleData = JSON.parse(decodeURIComponent(options.vehicleData));
      console.log(this.vehicleData, "8888");

      // 将vehicleData存储到本地存储
      uni.setStorageSync("vehicleData", this.vehicleData);

      // 假设 vehicleData 是一个数组，直接替换 vehicles
      this.vehicles = [this.vehicleData]; // 如果 vehicleData 是单个对象，您可能需要将其包装在数组中
    } else {
      // 如果没有传入vehicleData，尝试从本地存储获取
      const storedVehicleData = uni.getStorageSync("vehicleData");
      if (storedVehicleData) {
        this.vehicleData = storedVehicleData;
        this.vehicles = [this.vehicleData];
      } else {
        console.error("No vehicle data available");
        // 可以在这里添加一些错误处理，比如显示一个提示或者跳转回上一页
      }
    }
  },
  methods: {
    goOperateDetails(item) {
      uni.navigateTo({
        url: `/pages/hub_ygzw/vehicle/vehicleDetails?vehicleData=${encodeURIComponent(
          JSON.stringify(item)
        )}&ownerId=${item.ownerId}`,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  background-color: #f3f6fa;
  height: 100vh;
  width: 100%;
}

.card-list {
  padding: 10px;

  .card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    padding: 20px;
    .list-item {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .vehicle-number {
        font-size: 16px;
        color: #2c3e50;
        margin-right: 10px;
      }
      .color-label {
        background-color: #ffd700;
        color: white;
        width: 44px;
        height: 22px;
        line-height: 22px;
        border-radius: 3px;
        margin-right: auto;
        text-align: center;
        font-size: 12px;
      }
      .status-container {
        display: flex;
        align-items: center;
        .status-label {
          width: 44px;
          height: 22px;
          border-radius: 3px;
          color: white;
          margin-right: 5px;
          text-align: center;
          font-size: 12px;
          line-height: 22px;
        }

        .arrow-icon {
          margin-left: 5px;
        }

        .active {
          background-color: #32cd32;
        }

        .inactive {
          background-color: #ff4500;
        }
      }
    }
  }
}
</style>
